<!DOCTYPE html>
<html>
    <body>
        <div id="result"></div>
        <button type="button" onclick="displayFullName1()">原生 ajax 请求</button>
        <button type="button" onclick="displayFullName2()">jquery ajax 请求</button>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script type="text/javascript">
            displayFullName1 = function() {
                var request = new XMLHttpRequest();
                request.open('post', 'http://127.0.0.1:8000/test');

                // 监听 readyState 的变化
                request.onreadystatechange = function() {
                    // 检查请求是否成功
                    debugger
                    if(this.readyState === 4 && this.status === 200) {
                        // 将来自服务器的响应插入当前页面
                        document.getElementById("result").innerHTML = this.responseText;
                    }else {
                        document.getElementById("result").innerHTML = '请求失败';
                    }
                };
                request.send()
            }
            displayFullName2 = function() {
                $.ajax({
                    url: 'http://127.0.0.1:8000/test',
                    type: 'post',
                    dataType:'',
                    data:{
                        param1:'test1',
                        param2:'test2'
                    },
                    success:function(){
                        alert('成功')
                    },
                    error: function () {
                        alert('失败')
                    }
                })
            }
        </script>
    </body>

</html>